<template>
  <div class="com-user">
    <div class="user-main" ref="userMain"></div>
  </div>
</template>

<script>
import { getUserStatistics } from '@/api/statistics'
import * as echarts from 'echarts'
export default {
  name: 'ComUser',
  data () {
    return {
      userData: {
        dateList: [],
        newUserList: [],
        totalUserList: []
      }
    }
  },
  created () {
    this.getUserStatistics()
  },
  methods: {
    async getUserStatistics () {
      const res = await getUserStatistics({
        begin: this.begin,
        end: this.end
      })
      if (res.code === 1) {
        this.userData.dateList = res.data.dateList.split(',')
        this.userData.newUserList = res.data.newUserList.split(',')
        this.userData.totalUserList = res.data.totalUserList.split(',')
      }
    },
    user () {
      const myChart = echarts.init(this.$refs.userMain)
      const option = {
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          top: '5%',
          left: '10',
          right: '50',
          bottom: '12%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLabel: {
          // X轴字体颜色
            color: '#666',
            fontSize: 12
          },
          axisLine: {
          // X轴线颜色
            lineStyle: {
              color: '#E5E4E4',
              width: 1 // x轴线的宽度
            }
          },
          data: this.userData.dateList // 后端传来的动态数据
        },
        yAxis: [
          {
            type: 'value',
            min: 0,
            axisLabel: {
              color: '#666',
              fontSize: 12
            }
          }
        ],
        series: [
          {
            type: 'line',
            // stack: 'Total',
            smooth: false, // 否平滑曲线
            showSymbol: false, // 未显示鼠标上移的圆点
            // symbol:"circle", //设置折线点定位实心点
            lineStyle: { // 直接设置线样式
              color: '#FFD000',
              width: 2 // 建议明确线宽
            },
            itemStyle: { // 单独设置折线点样式
              color: '#F29C1B'
            },
            emphasis: { // 高亮状态
              itemStyle: {
                color: '#fff',
                borderWidth: 5,
                borderColor: '#FFC100'
              },
              lineStyle: { // 高亮时线样式（可选）
                width: 3
              }
            }
          },
          {
            showSymbol: false,
            symbolSize: 10,
            name: '用户总量',
            type: 'line',
            stack: 'top',
            data: this.userData.totalUserList,
            lineStyle: {
              color: '#ffe400',
              width: 2
            },
            itemStyle: {
              color: '#ffc100'
            },
            emphasis: {
              itemStyle: {
                color: '#fff',
                borderWidth: 5,
                borderColor: '#FFC100'
              }
            }
          },
          {
            showSymbol: false,
            symbolSize: 10,
            name: '新增用户',
            type: 'line',
            stack: 'bottom',
            data: this.userData.newUserList,
            lineStyle: {
              color: '#ff8b8b',
              width: 2
            },
            itemStyle: {
              color: '#fd7f7f'
            },
            emphasis: {
              itemStyle: {
                color: '#fff',
                borderWidth: 5,
                borderColor: '#fd7f7f'
              }
            }
          }
        ]
      }
      myChart.setOption(option)
    }
  },
  watch: {
    userData: {
      deep: true,
      handler () {
        this.$nextTick(() => {
          this.user()
        })
      }
    },
    watch: {
      begin () {
        this.getUserStatistics()
      }
    }
  },
  props: {
    begin: {
      type: String,
      default: ''
    },
    end: {
      type: String,
      default: ''
    }
  }
}
</script>

<style scoped lang="less">
.com-user,
.user-main {
    height: 100%;
}
</style>
